<template>
    <div id="btn-menu">
        <div class="bottom-menu-assist"></div>
        <div id="bottom-menu">
            <a @click="toIndex" id="to-index" class="bottom-menu-a">
                <image-vant :height="imgAss.height" :width="imgAss.width" class="menu-img-icon" :src="imgAss.toIndexAsIcon"></image-vant>
                <span class="bottom-menu-a-span">主页</span>
            </a>
            <a @click="share" id="to-share" class="bottom-menu-a">
                <image-vant :height="imgAss.height" :width="imgAss.width" class="menu-img-icon" :src="imgAss.shareIcon"></image-vant>
                <span class="bottom-menu-a-span">分享</span>
            </a>
            <a @click="toSetBus" id="bs-card">{{enterBusText}}</a>
        </div>
    </div>
</template>

<script>
// 自定义组件
import ImageVant from "_components/project/common/ImageVant"

// 自定义方法
import { getProImg } from "_projectFn/images" 
import { toIndex, enterUserSet, enterUserBus } from "_projectFn/page" 
import { isLoginChose } from "_projectFn/login" 
import { failTextVantToa } from "_projectFn/prompt"
import { getCookie } from "_commonFn/cookie"

// 本地图片
import toIndexAs from "_assets/img/to-index-association.svg"
import share from "_assets/img/share-icon.svg"

export default {
    props: {
        pageBasicData: {
            type: Object,
            default: {},
        }
    },
    name: 'BtnMenu',
    data() {
        return {
            imgAss: {
                toIndexAsIcon: getProImg('to-index-association.svg', toIndexAs),
                shareIcon: getProImg('share-icon.svg', share),
                width: 15,
                height: 15,
            },
            enterBusText: ''
        }
    },
    methods: {
        // 点击进入首页
        toIndex() {
            toIndex({})
        },
        // 点击分享
        share() {
            if (isLoginChose()) {
                if (this.$store.state.wechat.isWechatBro) {
                    this.$emit('setShare', 'user')
                } else {
                    failTextVantToa('请在微信客户端打开')
                }
            }
        },
        // 点击进入设置业务名片
        toSetBus() {
            if (isLoginChose()) {
                if (process.env.IS_LOCAL === 0 && getCookie('Ticket')) {
                    this.$emit('cachePageData')
                }
                // console.log('this.pageBasicData', this.pageBasicData)
                if (this.pageBasicData.isSetBus) {
                    enterUserBus({
                        userId: getCookie('UserId')
                    })
                } else {
                    enterUserSet('business')
                }
            }
        }
    },
    watch: {
        pageBasicData: {
            deep: true,
            handler(val) {
                // console.log('val', val)
                this.enterBusText = getCookie('Ticket') === '' ? '设置我的业务名片' : val.isSetBus ? '查看我的业务名片' : '设置我的业务名片'
            }
        }
    },
    components: {
        ImageVant,
    }
}
</script>

<style lang="scss" scoped>
.bottom-menu-assist {
    width: 100%;
    height: 55px;
}
#bottom-menu {
    position: fixed;
    width: 100%;
    height: 55px;
    line-height: 48px;
    background: white;
    left: auto;
    bottom: 0;
    border-top: 1px solid #ececec;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    box-shadow: 0px 1px 12px -5px #999999;

    .bottom-menu-a {
        height: 100%;
        width: 20%;
        color: #666666;
        position: relative;
        flex-wrap: nowrap;
        display: -webkit-flex;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;

        .menu-img-icon {
            width: 16px;
            height: 16px;
            line-height: 16px;
            padding-bottom: 3px;
        }

        .bottom-menu-a-span {
            height: 18px;
            line-height: 18px;
        }
    }

    #to-index {
        position: relative;

        &::after {
            content: '';
            width: 1px;
            height: 40%;
            background: #999999;
            position: absolute;
            top: 30%;
            right: -0.5px;
        }
    }

    #bs-card {
        color: white;
        background: #0077bf;
        width: 60%;
        font-size: 16px;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
</style>